<template>

<div v-show="loading">
  <van-skeleton title avatar :row="3" />
  <van-skeleton title avatar :row="3" />
  <van-skeleton title avatar :row="3" />
  <van-skeleton title avatar :row="3" />
  <van-skeleton title avatar :row="3" />
  <van-skeleton title avatar :row="3" />
  <van-skeleton title avatar :row="3" />
</div>


  <!-- 搜索页面 -->
  <Search v-if="isShowSearch" v-model="isShowSearch"></Search>

  <div v-else class="container">
    <TopSearch v-model="isShowSearch"></TopSearch>
    <div class="content">
      <van-swipe
        class="my-swipe swiper"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item>
          <img
            src="https://fdfs.xmcdn.com/storages/9264-audiofreehighqps/78/35/GKwRIMAHZdKTAAGIJQHdSFbi.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://fdfs.xmcdn.com/storages/4e02-audiofreehighqps/20/E6/GKwRIJEIbcSmAAH8EgIumTp3.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://fdfs.xmcdn.com/storages/3994-audiofreehighqps/E1/BB/GMCoOSUIsiylAAGzIgJJ2Sf5.jpg"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
      <div class="tomatoes">
        <div class="tomato-item">
          <router-link
            :to="{
              path: '/charts',
            }"
          >
            <img
              src="https://fdfs.xmcdn.com/group56/M09/3B/BD/wKgLgFyQujLCAVYRAAAuwA7DZMg198.png"
            />
            <p>排行榜</p>
          </router-link>
        </div>
        <div class="tomato-item">
          <router-link
            :to="{
              path: '/category',
            }"
          >
            <img
              src="https://fdfs.xmcdn.com/group60/M02/18/F4/wKgLeVziZxHRlc-lAAAO9ZkPU-I489.png"
            />
            <p>分类</p>
          </router-link>
        </div>
        <div class="tomato-item">
          <router-link
            :to="{
              path: '/listenlist',
            }"
          >
            <img
              src="https://fdfs.xmcdn.com/group57/M0A/3B/D0/wKgLgVyQuqWRZsJtAAAnr8tg4rs307.png"
            />
            <p>听单</p>
          </router-link>
        </div>
      </div>
      <div class="amid-banner">
        <img
          src="//imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png"
        />
      </div>

      <!-- 新人必听 -->
      <albumNew></albumNew>
      <!-- 限时免费 -->
      <albumFree :limtedFreeList="limtedFreeList"></albumFree>
      <!-- 今日热点 -->
      <albunRecomm title="今日热点" :hottrack="hottrack"></albunRecomm>
      <!-- 播客推荐 -->
      <albunRecomm title="播客推荐" :hottrack="hottrack"></albunRecomm>
      <!-- 底部 -->
      <div class="footer">
        <img
          class="footer-bg-img"
          src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp"
        />
        <img
          class="footer-logo"
          src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
        />
        <div class="copyright">
          <p>© 2014-2023 喜马拉雅 版权所有</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import albumNew from "./components/album-new.vue";
import albumFree from "./components/album-free.vue";
import albunRecomm from "./components/alum-recomm.vue";
import TopSearch from "../charts/components/TopSearch/TopSearch.vue";
import Search from "../charts/components/Search/Search.vue";
import { reqHotData } from "../../api/home";
import { onMounted, ref } from "vue";
import { hotTrackItem, limitedFreeItem } from "../../api/home/type";
const loading = ref(true);
// 是否显示搜索页面
let isShowSearch = ref<boolean>(false);
//今日热点数据
let hottrack = ref<hotTrackItem[]>([]);
//限时免费数据
let limtedFreeList = ref<limitedFreeItem[]>([]);
onMounted(async () => {
  await getHottrackAndFree();
  loading.value=false;
});

//获取今日热点和显示免费的请求功能函数
const getHottrackAndFree = async () => {
  try {
    let res = await reqHotData();
    if (res.code == 0) {
      hottrack.value = res.data.hotTrack.hotTracks;
      limtedFreeList.value = res.data.limitedFreeAlbum.limitedTimeFreeAlbums;
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
//头部
// .header{
//   position: fixed;
//   top: 0;
//   left: 0;
//   padding: 10px 15px;
//   background-color: #fff;
//   z-index: 99;
// }
.logo {
  display: flex;
  padding: 0;
  justify-content: space-between;
  img {
    width: 126px;
    height: 32px;
  }
  .to {
    font-size: 14px;
    color: #fff;
    width: 88px;
    height: 30px;
    background-color: #fa2800;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
  }
}
// .search{
//   display: flex;
//   position: relative;
//   input{
//     border-radius: 15px;
//     background-color: #ABABAB;
//     opacity: .3;
//     font-size: 12px;
//     width: 345px;
//     height: 30px;
//     line-height: 30px;
//     margin-top: 20px;
//     text-indent: 30px;
//   }
//   .search{
//     position: absolute;
//     left: 3px;
//     bottom: 3px;
//     color: #ABABAB;
//     font-size: 22px;
//   }
// }
.content {
  margin-top: 10px;
  .swiper {
    margin: 0 35px;
    border-radius: 15px;
    overflow: hidden;
    width: 300px;
    height: 115px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
//选择分类
.tomatoes {
  width: 375px;
  height: 55px;
  margin-top: 25px;
  padding-top: 25px;
  display: flex;
  justify-content: space-evenly;
  .tomato-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #666;
    img {
      width: 34px;
      height: 34px;
    }
    p{
      text-align: center;
    }
  }
}

//banner图
.amid-banner {
  margin: 18px 0 8px;
  img {
    width: 100%;
    height: 100%;
  }
}

// 底部
.footer {
  border-top: 0.5px solid #fff;
  max-width: 640px;
  min-width: 320px;
  margin: auto;
  height: 180px;
  text-align: center;
  position: relative;
  img {
    max-width: 100%;
    border: none;
    font-size: 10px;
  }
  .footer-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 180px;
    width: 100%;
    z-index: -1;
  }
  .footer-logo {
    width: 102px;
    height: 36px;
    margin: 34px auto 0;
  }
  .copyright {
    padding-bottom: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    color: gray;
    line-height: 16px;
    text-align: center;
    margin-top: 15px;
  }
}
</style>
